<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图表</title>
<script src="../static/js/jquery-1.12.4.js"
	th:href=@{/js/jquery-1.12.4.js}></script>
<script src="../static/js/echarts.min.js" th:href=@{/js/echarts.min.js}></script>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 800px; height: 450px;"></div>
	<script type="text/javascript">
		$(document).ready(function() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			//数据加载完之前先显示一段简单的loading动画
			myChart.showLoading();
			var names = []; //横坐标数组（实际用来盛放X轴坐标值）
			var values = []; //纵坐标数组（实际用来盛放Y坐标值）
			$.ajax({
				type : "post",
				async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
				url : "EcharsShow", //请求发送到dataActiont处
				data : {},
				dataType : "json", //返回数据形式为json
				success : function(result) {
					//请求成功时执行该函数内容，result即为服务器返回的json对象
					if (result) {
						for (var i = 0; i < result.length; i++) {
							names.push(result[i].name);
							values.push(result[i].num);
						}
						myChart.hideLoading(); //隐藏加载动画
						myChart.setOption({ //加载数据图表
							tooltip : {},
							legend : {
								data : [ '數量' ]
							},
							xAxis : {
								data : names
							},
							yAxis : {
								type : 'value'
							},
							series : [ {
								// 根据名字对应到相应的系列
								name : '數量',//薪资 series not exists. Legend data should be same with series name or data name.
								type : 'bar',
								data : values
							} ]
						});
					}
				},
				error : function(errorMsg) {
					//请求失败时执行该函数
					alert("图表请求数据失败!");
					myChart.hideLoading();
				}
			});//end ajax
		});
	</script>

</body>
</html>